<template>
    <h3>组件生命周期函数应用</h3>
    <p ref="name">1、通过ref获取元素DOM结构</p>
    <p>2、模拟网络请求渲染数据：</p>
    <ul>
        <li v-for="(item, index) of banner" :key="index">
            <h3>{{ item.title }}</h3>
            <p>{{ item.content }}</p>
        </li>
    </ul>
</template>
<script>
export default {
    data() {
        return {
            banner: []
        }
    },
    //组件渲染之前，是读取不到DOM结构的，得等组件渲染之后
    beforeMount() {
        console.log(this.$refs.name);
    },
    mounted() {
        console.log(this.$refs.name);
        this.banner = [
            {
                "title": "我在爱尔兰1",
                "content": "爱尔兰（爱尔兰语）1"
            },
            {
                "title": "我在爱尔兰2",
                "content": "爱尔兰（爱尔兰语）2"
            },
            {
                "title": "我在爱尔兰3",
                "content": "爱尔兰（爱尔兰语）3"
            },
            {
                "title": "我在爱尔兰4",
                "content": "爱尔兰（爱尔兰语）4"
            },
        ]
    }

}
</script>